import {
  AccountBookOutlined,
  HomeOutlined,
  RadarChartOutlined,
  ShopOutlined,
} from "@ant-design/icons";
import {
  Card,
  Col,
  Progress,
  Row,
  Space,
  Statistic,
  Tag,
  Timeline,
} from "antd";
import React, { useEffect, useState } from "react";
import styles from "./index.module.scss";
import EChartsReact from "echarts-for-react";
import { getEnergyData } from "@/services/api/dashboard";

const Dashboard: React.FC = (props) => {
  const [info, setInfo] = useState(infoData);
  const [energyOption, setEnergyOption] = useState(energyOptionData);

  useEffect(() => {
    async function loadData() {
      const energyData = await getEnergyData();
      setEnergyOption({
        ...energyOption,
        legend: { data: energyData.legend },
        xAxis: {
          ...energyOption.xAxis,
          data: energyData.xAxis,
        },
        series: energyData.series.map((item) => ({
          ...item,
          type: "line",
          stack: "Total",
        })),
      });
    }

    loadData();
  }, []);

  return (
    <div className={styles.container}>
      {/* 数据总览看板 */}
      <Row gutter={16}>
        {info.map((item) => (
          <Col span={6} key={item.num}>
            <Card>
              <div className={styles["info-card"]}>
                <div className={styles["content"]}>
                  <h2>{item.num}</h2>
                  <span>{item.desc}</span>
                </div>
                <div className={styles["icon"]}>{item.icon}</div>
              </div>
            </Card>
          </Col>
        ))}
      </Row>
      {/* 可视化看板 */}
      <Row gutter={16}>
        <Col span={12}>
          <Card title="能源消耗情况" variant="borderless">
            <EChartsReact option={energyOption} style={{ height: "230px" }} />
          </Card>
        </Col>
        <Col span={12}>
          <Card title="企业资质情况(家)" variant="borderless">
            <EChartsReact
              option={qualificationsOptionData}
              style={{ height: "230px" }}
            />
          </Card>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={12}>
          <Card title="租赁情况" variant="borderless">
            <EChartsReact
              option={leaseOptionData}
              style={{ height: "240px" }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card
            title="充电桩空闲统计"
            variant="borderless"
            style={{ height: "100%" }}
          >
            <div className={styles["card-center"]}>
              <Progress type="circle" percent={75} />
              <Statistic title="充电桩总数" value={75} suffix="/ 100" />
            </div>
          </Card>
        </Col>
        <Col span={6}>
          <Card
            title="实时车辆信息"
            variant="borderless"
          >
            <div style={{ height: "240px", overflowX: 'auto',padding: "8px 0", boxSizing: "border-box"}}>
              <Timeline items={carOptionData} style={{ minWidth: "100%" }}/>
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Dashboard;

const infoData = [
  {
    desc: "园区总面积(平方米)",
    num: 13479,
    icon: <RadarChartOutlined />,
  },
  {
    desc: "总租赁面积(平方米)",
    num: 8635,
    icon: <HomeOutlined style={{ color: "#e49362" }} />,
  },
  {
    desc: "园区总产值(万元)",
    num: 38764,
    icon: <AccountBookOutlined style={{ color: "#62c9cb" }} />,
  },
  {
    desc: "入驻企业总数(家)",
    num: 2874,
    icon: <ShopOutlined style={{ color: "#81c452" }} />,
  },
];

const energyOptionData: any = {
  // title: {
  //   text: "当日能源消耗",
  // },
  tooltip: {
    trigger: "axis",
  },
  legend: {
    left: "auto",
    data: [],
  },
  grid: {
    left: "1%",
    right: "1%",
    bottom: "0%",
    containLabel: true,
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: [],
  },
  yAxis: {
    type: "value",
  },
  series: [],
};

const qualificationsOptionData = {
  // title: {
  //     text: '企业资质情况(家)'
  // },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    left: "auto",
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  grid: {
    left: "1%",
    right: "1%",
    bottom: "0%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    boundaryGap: [0, 0.01],
    data: ["2014", "2016", "2018", "2020", "2022", "2024"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      name: "科技企业",
      type: "bar",
      data: [40, 220, 378, 658, 1122, 1200],
    },
    {
      name: "高新企业",
      type: "bar",
      data: [20, 39, 443, 490, 559, 762],
    },
    {
      name: "国营企业",
      type: "bar",
      data: [78, 167, 229, 330, 380, 420],
    },
  ],
};
const leaseOptionData = {
  // legend: {
  //   top: "10px",
  // },
  series: [
    {
      name: "Nightingale Chart",
      type: "pie",
      radius: [30, 100],
      center: ["50%", "50%"],
      roseType: "area",
      itemStyle: {
        borderRadius: 8,
      },
      data: [
        { value: 40, name: "在营" },
        { value: 38, name: "已租" },
        { value: 32, name: "出租" },
        { value: 30, name: "续签" },
        { value: 28, name: "新签" },
        { value: 26, name: "待租" },
        { value: 22, name: "退租" },
      ],
    },
  ],
};
const carOptionData = [
  {
    color: "green",
    children: (
      <div>
        <Tag color="green">进场</Tag>
        <Space size={4}>
          <span>08:24</span>
          <span>车辆</span>
          <span>京A66666</span>
        </Space>
      </div>
    ),
  },
  {
    color: "red",
    children: (
      <div>
        <Tag color="red">出场</Tag>
        <Space size={4}>
          <span>09:15</span>
          <span>车辆</span>
          <span>京A66666</span>
        </Space>
      </div>
    ),
  },
  {
    color: "green",
    children: (
      <div>
        <Tag color="green">进场</Tag>
        <Space size={4}>
          <span>09:22</span>
          <span>车辆</span>
          <span>京A23456</span>
        </Space>
      </div>
    ),
  },
  {
    color: "red",
    children: (
      <div>
        <Tag color="red">出场</Tag>
        <Space size={4}>
          <span>10:43</span>
          <span>车辆</span>
          <span>京A18763</span>
        </Space>
      </div>
    ),
  },
  {
    color: "green",
    children: (
      <div>
        <Tag color="green">进场</Tag>
        <Space size={4}>
          <span>13:38</span>
          <span>车辆</span>
          <span>京A88888</span>
        </Space>
      </div>
    ),
  },
  {
    color: "green",
    children: (
      <div>
        <Tag color="green">进场</Tag>
        <Space size={4}>
          <span>14:46</span>
          <span>车辆</span>
          <span>京A23456</span>
        </Space>
      </div>
    ),
  },
  {
    color: "green",
    children: (
      <div>
        <Tag color="green">进场</Tag>
        <Space size={4}>
          <span>14:46</span>
          <span>车辆</span>
          <span>京A23456</span>
        </Space>
      </div>
    ),
  },
];
